<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试卷答题详情</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/style.min.css}">
    <style>
        .correct-answer {
            color: #1ab394;
        }
        .wrong-answer {
            color: #ed5565;
        }
        .question-item {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #e7eaec;
            border-radius: 4px;
        }
        .option-item {
            margin: 5px 0;
            padding: 5px;
        }
        .score-info {
            font-size: 16px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>试卷答题详情</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <h2 th:text="${paper.name}">试卷名称</h2>
                                <div class="score-info">
                                    <span>得分：</span>
                                    <span th:text="${score.score}" class="text-success"></span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row" th:each="question,stat : ${questions}">
                            <div class="col-sm-12 question-item">
                                <h4>
                                    <span th:text="${stat.count}">1</span>.
                                    <span th:text="${question.paperLib.questionBody}">题目内容</span>
                                </h4>
                                
                                <div class="options" th:each="option : ${question.options}">
                                    <div class="option-item">
                                        <span th:text="${option.options}"></span>、 <span th:text="${option.content}">选项内容</span>
                                    </div>
                                </div>
                                
                                <div class="answer-info">
                                    <p>
                                        <strong>正确答案：</strong>
                                        <span th:text="${question.paperLib.refAnswer}" class="correct-answer"></span>
                                    </p>
                                    <p>
                                        <strong>我的答案：</strong>
                                        <span th:text="${question.studentAnswer.answer}"
                                              th:class="${question.studentAnswer.answer == question.paperLib.refAnswer ? 'correct-answer' : 'wrong-answer'}">
                                            我的答案
                                        </span>
                                    </p>
                                    <p>
                                        <strong>得分：</strong>
                                        <span th:text="${question.studentAnswer.score}">0</span>
                                    </p>
                                    <p th:if="${question.paperLib.explanation != null and question.paperLib.explanation != ''}">
                                        <strong>解析：</strong>
                                        <span th:text="${question.paperLib.explanation}">解析内容</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</body>
</html> 